<template>
  <div class="username-input">
    <div class="prompt-box">
      <div class="prompt-title">请输入用户名</div>
      <div class="prompt-content">
        <el-input v-model="username" placeholder="请输入用户名" @keyup.enter="login"></el-input>
      </div>
      <div class="prompt-buttons">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="login">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: "",
    };
  },
  methods: {
    async login() {
      if (this.username.trim() === "") {
        this.$message.error("用户名不能为空");
        return;
      }

      try {
        // 调用 API 查询用户信息
        const response = await axios.get('http://websocket.1uu.pw/user/page?pageSize=9999', {
          params: {  // 如果接口需要分页参数
            page: 1,
            pageSize: 10
          }
        });

        // 安全访问多层嵌套数据
        const data = response.data?.data; // 注意这里多了一个data层级

        // 验证数据结构
        if (!data || !Array.isArray(data.records)) {
          throw new Error('无效的响应数据结构');
        }

        // 执行查询
        const user = data.records.find(item =>
          item?.name?.toLowerCase() === this.username.trim().toLowerCase()
        );

        if (!user) {
          throw new Error('用户名不存在');
        }

        // 登录成功处理
        console.log('登录用户信息:', user);
        localStorage.setItem('user', JSON.stringify(user));
        localStorage.setItem('username', user.name); // 保存用户名
        localStorage.setItem('userId', user.id); // 保存用户 ID

        // 跳转到聊天页面
        this.$router.push("/weChat");

        // 提示登录成功
        this.$message.success("登录成功，欢迎进入聊天室！");
      } catch (error) {
        console.error('登录错误:', error); // 添加错误日志便于调试
        this.$message.error(error.message || '登录失败，请检查控制台');
      }
    },

    cancel() {
      this.username = ""; // 清空用户名
      this.$router.push("/"); // 返回首页
    },
  },
};
</script>

<style scoped>
.username-input {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  /* 背景色 */
}

.prompt-box {
  background-color: #ffffff;
  /* 白色背景 */
  padding: 30px;
  border-radius: 12px;
  /* 圆角 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* 阴影 */
  width: 360px;
  /* 固定宽度 */
  text-align: center;
}

.prompt-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333333;
  /* 标题颜色 */
}

.prompt-content {
  margin-bottom: 24px;
}

.prompt-buttons {
  display: flex;
  justify-content: flex-end;
  /* 按钮靠右 */
}

.el-button {
  margin-left: 12px;
  /* 按钮间距 */
  border-radius: 6px;
  /* 按钮圆角 */
}

.el-button--primary {
  background-color: #67c23a;
  /* 主按钮背景色 */
  border-color: #67c23a;
  /* 主按钮边框色 */
}

.el-button--primary:hover {
  background-color: #5daf36;
  /* 主按钮悬停背景色 */
  border-color: #5daf36;
  /* 主按钮悬停边框色 */
}

.el-button--primary:active {
  background-color: #529b2f;
  /* 主按钮点击背景色 */
  border-color: #529b2f;
  /* 主按钮点击边框色 */
}

.el-input {
  width: 100%;
  /* 输入框宽度 */
}

.el-input__inner {
  border-radius: 6px;
  /* 输入框圆角 */
  border: 1px solid #dcdfe6;
  /* 输入框边框 */
  padding: 10px 12px;
  /* 输入框内边距 */
}

.el-input__inner:focus {
  border-color: #67c23a;
  /* 输入框聚焦边框色 */
  box-shadow: 0 0 4px rgba(103, 194, 58, 0.3);
  /* 输入框聚焦阴影 */
}
</style>